<script setup lang="ts">
import BtnFollow from '@/components/BtnFollow/index.vue'
import PullDown from '@/components/PullDown/index.vue'
import TransitionHeight from '@/components/TransitionHeight/index.vue'
import ItemVideo from '@/components/ItemVideo/index.vue'
import { useAuth } from '@/stores/auth/index'
import APICommon from '@/api/common'
import { ElMessageBox, ElMessage, ElLoading } from 'element-plus'
import { copyToClipboard } from '@/utils/index'
import APIDetails from '@/api/details'
import { replaceCommaWithDash } from '~/utils/index'
import type { ShopkeeperListResult } from '~/api/shopkeeper/types'

interface Props {
    showRanking?: boolean;
    shopkeeper?: ShopkeeperListResult;
}

interface Emits {
    (e: 'on-show-dialog-message', value?: ShopkeeperListResult): void;
}

const { isNextOperation } = useAuth()

const $router = useRouter()

const $props = withDefaults(defineProps<Props>(), {
    showRanking: false
})

const $emit = defineEmits<Emits>()

const isShowShopkepperDetail = shallowRef(false)
const { public: { NUXT_APP_WEB_URL } } = useRuntimeConfig()

function handleJumpStore() {
    if (isNextOperation()) {
        window.open($router.resolve(`/store-home?shopId=${$props.shopkeeper?.shop_id}`).href, '_blank')
    }
}

function handleCopy() {
    if (isNextOperation()) {
        ElMessageBox.confirm(
            '是否复制当前店铺链接？',
            '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            copyToClipboard(`${NUXT_APP_WEB_URL}/store-home?shopId=${$props.shopkeeper?.shop_id}`)
        }).catch(() => {
            ElMessage.info('已取消')
        })
    }
}

let timeoutId: any

const loading = shallowRef<boolean>(false)
watch(isShowShopkepperDetail, (newValue) => {
    if (newValue) {
        loading.value = true
        if (timeoutId) {
            clearTimeout(timeoutId);
        }
        timeoutId = setTimeout(() => {
            getSquareShopGoods()
        }, 800)
    }
})

const squareShopGoodsLlist = ref<any>([])

function getSquareShopGoods() {
    const shop_id = $props.shopkeeper?.shop_id
    if (!shop_id) return
    loading.value = true
    APICommon.getSquareShopGoods(shop_id).then(({ data }) => {
        squareShopGoodsLlist.value = data
        console.log(squareShopGoodsLlist.value)
    }).finally(() => {
        loading.value = false
    })
}


function submitAttention(Invite_code?: string) {
    if (!isNextOperation()) return
    ElMessageBox.confirm(
        '是否关注该店铺？',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        if (!Invite_code) return
        const loading = ElLoading.service({ lock: true })
        APIDetails.setUserConcern(Invite_code).then(() => {

        }).finally(() => {
            loading.close()
        })
    }).catch(() => {
        ElMessage.info('已取消')
    })
}

function submitUnfollow(Invite_code?: string) {
    if (!isNextOperation()) return
    ElMessageBox.confirm(
        '是否取消关注该店铺？',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        if (!Invite_code) return
        const loading = ElLoading.service({ lock: true })
        APIDetails.cancelUserConcern(Invite_code).then(() => {

        }).finally(() => {
            loading.close()
        })
    }).catch(() => {
        ElMessage.info('已取消')
    })
}

function handleJumpVideoDetails(id: number) {
    $router.push({
        name: 'VideoDetails',
        params: {
            id
        },
        query: {
            categoryType: 'Video'
        }
    })
}

function handleJumpPictureDetails(id: any) {
    window.open($router.resolve(`/picture-details/${id}?categoryType=Picture`).href, '_blank')
}

function handleJumpFontDetails(id: any) {
    $router.push({
        name: 'FontDetails',
        params: {
            id
        },
        query: {
            categoryType: 'Font',
        }
    })
}

function handleJumpMusicDetails(id: any) {
    $router.push({
        name: 'MusicDetails',
        params: {
            id
        },
        query: {
            categoryType: 'Music',
        }
    })
}

</script>

<template>
    <div class="item-shopkeeper">
        <div class="item">
            <div class="ranking" v-if="showRanking">1</div>
            <div class="shopkeeper" :class="{ 'is-show-ranking': !showRanking }">
                <div class="left">
                    <div class="photo">
                        <img v-if="shopkeeper?.user?.head_img" :src="shopkeeper?.user?.head_img" alt="head_img">
                    </div>
                    <div class="info">
                        <button type="button" @click="submitAttention(shopkeeper?.user?.Invite_code)"
                            v-if="shopkeeper?.user?.is_concern == 0">关注</button>
                        <button type="button" style="background-color: #9499a0;"
                            @click="submitUnfollow(shopkeeper?.user?.Invite_code)"
                            v-if="shopkeeper?.user?.is_concern == 1">已关注</button>
                        <p>{{ shopkeeper?.user?.username }}</p>
                    </div>
                </div>
                <div class="center" v-if="!showRanking">
                    <div class="time">{{ shopkeeper?.time }}</div>
                    <div class="region">
                        <div>
                            <img src="./images/position.png" alt="position">
                        </div>
                        {{ replaceCommaWithDash(shopkeeper?.user?.area) }}
                    </div>
                    <div class="like">喜欢人数：{{ shopkeeper?.user?.fans }}</div>
                </div>
                <div class="right">
                    <div class="icon" @click="$emit('on-show-dialog-message', shopkeeper)">
                        <img src="./images/message.png" alt="message">
                    </div>
                    <div class="icon" @click="handleCopy">
                        <img src="./images/share.png" alt="share">
                    </div>
                    <button class="btn" @click="handleJumpStore">进入店铺</button>
                    <PullDown v-model="isShowShopkepperDetail" />
                </div>
            </div>
        </div>
        <TransitionHeight>
            <div class="shopkeeper-detail" v-show="isShowShopkepperDetail" v-loading="loading">
                <el-empty style="margin: 0 auto;" description="暂无内容" v-if="squareShopGoodsLlist.length == 0"
                    :image-size="82" />
                <div v-for="item in squareShopGoodsLlist" :key="item.id">
                    <div style="width: 300px; height: 100%;" v-if="item.type == 'video'"
                        @click="handleJumpVideoDetails(item.goods_id)">
                        <ItemVideo :image="item.image" :sample="item.sample" />
                    </div>
                    <div style="width: 300px; height: 100%; cursor: pointer;" v-if="item.type == 'picture'"
                        @click="handleJumpPictureDetails(item.goods_id)">
                        <img style="width: 100%; height: 100%; object-fit: cover;" :src="item.image" alt="image">
                    </div>
                    <div style="width: 300px; height: 100%; cursor: pointer;" v-if="item.type == 'font'"
                        @click="handleJumpFontDetails(item.goods_id)">
                        <img style="width: 100%; height: 100%; object-fit: cover;" :src="item.image" alt="image">
                    </div>
                    <div style="width: 170px; height: 100%; cursor: pointer;" v-if="item.type == 'music'"
                        @click="handleJumpMusicDetails(item.goods_id)">
                        <img style="width: 100%; height: 100%; object-fit: cover;" :src="item.image" alt="image">
                    </div>
                </div>
            </div>
        </TransitionHeight>
    </div>
</template>

<style lang="less" scoped>
.item-shopkeeper {
    font-family: 'SOURCEHANSANSCN-EXTRALIGHT';

    .shopkeeper-detail {
        box-sizing: border-box;
        width: 100%;
        height: 170px;
        background-color: rgba(244, 245, 246, 1);
        margin-bottom: 17px;
        overflow: hidden;
        display: flex;
        gap: 0 20px;
    }

    .item {
        padding: 14px 0;
        border-bottom: 1px solid #E8E8E8;
        display: flex;

        div.is-show-ranking {
            width: 100%;
        }

        .shopkeeper {
            background-color: #F4F5F6;
            width: calc(100% - 145px);
            padding: 5px;
            border-radius: 50px 0 0 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .right {
                margin-right: 13px;
                display: flex;
                align-items: center;

                .btn {
                    width: 200px;
                    height: 36px;
                    border-radius: 22px;
                    background-color: rgba(249, 20, 20, 1);
                    color: #ffffff;
                    font-size: 14px;
                    text-align: center;
                    border: none;
                    margin-right: 20px;
                    cursor: pointer;
                }

                .icon {
                    width: 24px;
                    height: 24px;
                    margin-right: 66px;
                    cursor: pointer;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .center {
                display: flex;
                align-items: center;
                font-size: 14px;

                .like {
                    margin-left: 130px;
                    color: #9A9A9A;
                }

                .region {
                    margin-left: 95px;
                    color: #9A9A9A;
                    display: flex;

                    div {
                        width: 18px;
                        height: 18px;
                        margin-right: 3px;

                        img {
                            width: 18px;
                            height: 18px;
                        }
                    }
                }

                .time {
                    color: rgba(64, 149, 229, 1);
                    font-size: 14px;
                }
            }

            .left {
                display: flex;

                .info {
                    margin-top: 16px;
                    margin-left: 20px;

                    >p {
                        margin-top: 9px;
                        color: rgba(16, 16, 16, 1);
                        font-size: 18px;
                        font-family: 'SOURCEHANSANSCN-LIGHT';
                    }

                    button {
                        width: 40px;
                        height: 18px;
                        line-height: 18px;
                        border-radius: 5px;
                        background-color: rgba(249, 20, 20, 1);
                        color: rgba(255, 255, 255, 1);
                        font-size: 12px;
                        border: none;
                        cursor: pointer;
                        display: block;
                        margin: 0 auto;
                        margin-top: 6px;
                    }
                }

                .photo {
                    width: 85px;
                    height: 85px;
                    background-color: #dddddd;
                    border-radius: 50%;

                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }
            }
        }

        .ranking {
            width: 145px;
        }
    }
}
</style>